<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body >
		<main class="pab150" id="app">
			<section class="join picBg">
				<div class="container" >
					<div class="radius20 whiteBg pad30 pab80">
						<label class="item clearfix">
							<div class="name">账号</div>
							<input type="text" class="formInput" id="username" v-model="user.username" placeholder="以字母开头，长度在6~18之间，只能包含字符、数字和下划线。"/>
						</label>
						<label class="item clearfix">
							<div class="name">密码</div>
							<input type="password" class="formInput" id="password" v-model="user.password"/>
						</label>
						<label class="item clearfix">
							<div class="name">姓名</div>
							<input type="text" class="formInput" id="name" v-model="user.realname"/>
						</label>
						<label class="item clearfix">
							<div class="name">生日</div>
							<input type="text" class="formInput" id="dateSelect" />
						</label>
						<div class="item clearfix">
							<div class="name">电话</div>
							<input type="text" class="formInput" id="telephone" v-model="user.phonenum" />
							<div class="getMobile">获取手机号</div>
						</div>
						<label class="item clearfix">
							<div class="name">身份证号码</div>
							<input type="text" class="formInput" id="idCard" v-model="user.identitynum" />
						</label>
						<label class="item clearfix">
							<div class="name">性别：</div>
							<select class="formInput" id="sex" v-model="user.sex">
								<option value="0">男</option>
								<option value="1">女</option>
							</select>
						</label>
						<div class="item clearfix">
							<div class="name">邮箱</div>
							<input type="text" class="formInput" id="email" v-model="user.email" placeholder="请输入正确的邮箱地址"/>
							<div class="getMobile" @click="sendEmail">发送邮箱</div>
						</div>
						<label class="item clearfix">
							<div class="name">验证码</div>
							<input type="text" class="formInput" id="code" v-model="code1"/>
						</label>
						<div>注册完账号需要去填写的邮箱内激活账号，否则不能登录</div>
						<div class="subBtn" id="join" @click="register()">确认</div>
					</div>					
				</div>
			</section>	
		</main>

		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/rolldate.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script src="../js/vue.js"></script>
        <script src="../js/axios.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
					user:{
						username:"",
						birthday:"",
						phonenum:"",
						email:"",
						identitynum:"",
						sex:"",
						password:"",
						realname:""
					},
					code1:"",
					code2:"",
					error:"",
				},
				methods:{

                      sendEmail(){
                        const _this=this;
						axios.get("/user/sendEmail",{params:{email: _this.user.email}}).then(function (response){
							_this.code2=response.data;
							if(_this.code2=="defeated"){
								layer.msg("发送失败，请填写正确的邮箱地址");
							}else {
								layer.msg("发送成功");
							}
						})
					  },
					register(){
						const _this=this;
						_this.user.birthday=$("#dateSelect").val();
						console.log(_this.user)
						  if(_this.code2==_this.code1){
							  var regex=/^[a-zA-Z_]\w{5,15}$/;
							if(!regex.test(_this.user.username)){
								layer.msg("账号格式错误");
							}else {
								axios.post("/user/register",_this.user).then(function (response){
									_this.error=response.data;
									if(_this.error=="succeed"){
										location.href="/userclient/login.html";
									}else {
										layer.msg(_this.error);
									}

								})
							}
						  }else {
							  layer.msg("验证码错误");
						  }
					}
				},
				created(){

				}
			})
		</script>
	</body>

</html>